<template>
	<view>
		<view class="info-top">
			<view class="info-avatar">
				<img :src="form.image" alt="" style="width: 100%; height: 100%; border-radius: 50%;">
			</view>
			<view class="info-right">
				<view class="ir-name">{{trainneInfo.name}}</view>
				<view class="ir-upload" @click="changeUserPhoto">上传头像</view>
			</view>
		</view>
		<view class="basic">基本信息</view>
		<view class="basic-info">
			<u-form :model="form" ref="uForm">
				<u-form-item label="联系人" prop="person" label-width="150" :required="true">
					<u-input v-model="form.person" @click="show = true" />
					<u-select v-model="show" :list="nameList" @confirm="confirm"></u-select>
				</u-form-item>

				<u-form-item label="联系方式" prop="phone" label-width="150" :required="true">
					<u-input v-model="form.phone" />
				</u-form-item>
				<u-form-item label="性别" prop="sex" label-width="150" :required="true">
					<u-radio-group v-model="form.sex">
						<u-radio @change="radioChange" v-for="(item, index) in sexList" :key="index" :name="item.value">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="生日" prop="birthday" label-width="150">
					<!-- <u-button @click="showDate = true">打开</u-button> -->
					<u-input v-model="form.birthday" @click="showDate = true" />
					<u-calendar v-model="showDate" :mode="mode" @change="Datechange"></u-calendar>

				</u-form-item>
			</u-form>
		</view>
		<view class="basic">选填信息</view>
		<view class="basic-info">
			<u-form :model="form">
				<u-form-item label="紧急电话" label-width="150">
					<u-input v-model="form.exigencyPhone" />
				</u-form-item>
				<u-form-item label="年级" label-width="150">
					<u-input v-model="form.gradeName" @click="showGrade = true" />
					<u-select v-model="showGrade" :list="gradeList" @confirm="gradeConfirm"></u-select>
				</u-form-item>
				<u-form-item label="班级" prop="sex" label-width="150">
					<u-input v-model="form.className" @click="showClass = true" />
					<u-select v-model="showClass" :list="classList" @confirm="classConfirm"></u-select>
				</u-form-item>
				<u-form-item label="QQ" label-width="150">
					<u-input v-model="form.qq" />
				</u-form-item>
				<u-form-item label="就读小学" label-width="150">
					<u-input v-model="form.attendedSchool" />
				</u-form-item>
				<u-form-item label="居住小区" label-width="150">
					<u-input v-model="form.address" />
				</u-form-item>
			</u-form>
		</view>
		<view class="submit-style">
			<u-button type="primary" @click="submitBtn">提交</u-button>
		</view>
	</view>
</template>

<script>
	// traineeUpdate
	import {
		traineeUpdate
	} from '@/utils/api.js';
	import {
		api
	} from '@/utils/config.js';
	import http from '@/utils/http.js'
	import {
		grade
	} from "./component/grade.js";
	export default {
		data() {
			return {
				trainneInfo: uni.getStorageSync('trainneInfo'),
				image: '../../static/img1.jpg',
				fileList: [],
				action: 'http://www.example.com',
				show: false,
				showDate: false,
				showGrade: false,
				showClass: false,
				mode: 'date',
				form: {
					name: '',
					image: '',
					person: '',
					phone: '',
					sex: '0',
					birthday: '',
					exigencyPhone: '',
					grade: '',
					gradeName: '',
					classSize: '',
					className: '',
					qq: '',
					attendedSchool: '',
					address: '',
					id: uni.getStorageSync('trainneInfo').id
				},
				rules: {

					person: [{
						required: true,
						message: '请选择联系人',
						trigger: ['change', 'blur'],
					}],
					phone: [{
						required: true,
						message: '请输入正确的手机号码',
						trigger: ['change', 'blur'],
					}],
					sex: [{
						required: true,
						message: '请选择性别',
						trigger: ['change', 'blur'],
					}],
					birthday: [{
						required: true,
						message: '请选择生日',
						trigger: ['change', 'blur'],
					}],
				},
				nameList: [{
						value: '本人',
						label: "本人"
					},
					{
						value: '爸爸',
						label: "爸爸"
					},
					{
						value: '妈妈',
						label: "妈妈"
					},
					{
						value: '爷爷',
						label: "爷爷"
					},
					{
						value: '奶奶',
						label: "奶奶"
					},
					{
						value: '外公',
						label: "外公"
					},
					{
						value: '外婆',
						label: "外婆"
					},
					{
						value: '其他',
						label: "其他"
					},
				],
				sexList: [{
					name: '男',
					value: '0'
				}, {
					name: '女',
					value: '1'
				}, ],
				gradeList: [],
				classList: [],
			}
		},
		onLoad() {
			this.form.phone = this.trainneInfo.phone
			this.form.image = this.trainneInfo.image
			this.form.person = this.nameList[0].value
			this.form = this.trainneInfo
		},
		onShow() {
			this.gradeList = grade.gradeList
			this.classList = grade.classList
		},
		methods: {
			gradeConfirm(e) {
				this.form.gradeName = e[0].label
				this.form.grade = e[0].value
			},
			classConfirm(e) {

				this.form.className = e[0].label
				this.form.classSize = e[0].value
			},
			confirm(e) {
				console.log("2", e);
				this.form.name = e[0].label
			},
			radioChange(e) {
				console.log("e", e);
			},
			Datechange(e) {
				console.log("1", e);
				this.form.birthday = e.result
			},

			submitBtn() {
				this.$refs.uForm.validate(async (valid) => {
					if (valid) {
						console.log('验证通过');
						const {
							code
						} = await traineeUpdate(this.form)
						if (code === 200) {
							uni.showToast({
								title: `修改成功`,
								icon: 'none',
								duration: 2000
							});
						}
					} else {
						console.log('验证失败');
					}
				});
			},
			async changeUserPhoto() {
				const a = await http.uploadImage()
				this.form.image = a[0].url
			},
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>
<style>
	page {
		background-color: #ffffff;
	}
</style>
<style>
	.info-top {
		display: flex;
		margin-top: 40rpx;
		margin-left: 30rpx;
	}

	.info-avatar {
		width: 100rpx;
		height: 100rpx;
	}

	.info-right {
		margin-left: 20rpx;
	}

	.ir-name {
		font-weight: bold;
	}

	.ir-upload {
		font-size: 22rpx;
		margin-top: 20rpx;
		cursor: pointer;
		color: #4772ff;
	}

	.basic {
		font-weight: bold;
		margin-top: 40rpx;
		margin-left: 30rpx;
	}

	.basic-info {
		padding: 10rpx 60rpx;
	}

	.submit-style {
		width: 89%;
		height: 100rpx;
		margin: 50rpx auto;
	}
</style>